<template>
  <div class="honor">
    <div id="certify">
      <myTitle name="荣誉资质" EngName="HONOR"></myTitle>
      <div class="swiper-container-honor">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../img/honor-1.png" />
          </div>
          <div class="swiper-slide">
            <img src="../img/honor-2.jpg" />
          </div>
          <div class="swiper-slide">
            <img src="../img/honor-3.jpg" />
          </div>
          <div class="swiper-slide">
            <img src="../img/honor-4.png" />
          </div>
          <div class="swiper-slide">
            <img src="../img/honor-5.png" />
          </div>
        </div>
      </div>
      <div class="swiper-button-prev btn-prev"></div>
      <div class="swiper-button-next btn-next"></div>
    </div>
    <router-link to="about/about-honor"><Button class="btn">
      MORE
      <Icon type="ios-arrow-forward"></Icon>
    </Button></router-link>
    
  </div>
</template>

<script>
import Swiper from "swiper";
import myTitle from "@/components/myTitle.vue";
export default {
  components: {
    myTitle,
  },

  mounted() {
    var swiper = new Swiper(".swiper-container-honor", {
      watchSlidesProgress: true,
      slidesPerView: "auto",
      centeredSlides: true,
      loop: true,
      loopedSlides: 5,
      autoplay: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      on: {
        progress: function (progress) {
          for (let i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            var slideProgress = this.slides[i].progress;
            var modify = 1;
            if (Math.abs(slideProgress) > 1) {
              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            var translate = slideProgress * modify * 260 + "px";
            var scale = 1 - Math.abs(slideProgress) / 5;
            var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform(
              "translateX(" + translate + ") scale(" + scale + ")"
            );
            slide.css("zIndex", zIndex);
            slide.css("opacity", 1);
            if (Math.abs(slideProgress) > 3) {
              slide.css("opacity", 0);
            }
          }
        },
        setTransition: function (transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            slide.transition(transition);
          }
        },
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.honor {
  margin: 0 auto;
  text-align: center;
  padding: 80px 0 50px;
  background-color: #f8f8f8;
}
#certify {
  position: relative;
  width: var(--wrap);
  overflow: hidden;
  margin: 0 auto;
}
#certify .swiper-container-honor {
  padding-bottom: 60px;
}
#certify .swiper-slide {
  width: 500px;
  height: 350px;
}
#certify .swiper-slide img {
  display: block;

  width: 100%;
  height: 100%;
}
#certify .swiper-slide p {
  line-height: 98px;
  padding-top: 0;
  text-align: center;
  color: #636363;
  font-size: 1.1em;
  margin: 0;
}
#certify .swiper-button-prev {
  left: 8px;
  width: 45px;
  height: 45px;
  background-position: 0 0;
  background-size: 100%;
}

#certify .swiper-button-prev:hover {
  background-position: 0 -46px;
  background-size: 100%;
}

#certify .swiper-button-next {
  right: 8px;
  width: 45px;
  height: 45px;
  background-position: 0 -93px;
  background-size: 100%;
}

#certify .swiper-button-next:hover {
  background-position: 0 -139px;
  background-size: 100%;
}
.btn-prev,
.btn-next {
  width: 70px;
  height: 70px;
  background-color: var(--color-zdyblue);
  border-radius: 50%;
}
#certify {
  --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 20px; /* 设置按钮大小 */
}
#certify .swiper-slide-active {
  opacity: 1 !important;
}
.btn {
  margin-top: 10px;
  border-color: var(--color-zdyblue);
  border-radius: 100px;
  color: var(--color-zdyblue);
}
</style>